<template>
  <div class="pdetails">
    <!-- 头部 开始 -->
    <div class="top">
      <back></back>
      <span>商家详情</span>
      <div class="share">
        <img src="../assets/fen.png" />
        <van-cell @click="showShare = true" />
        <van-share-sheet
          v-model="showShare"
          :options="options"
          @select="onSelect"
        />
      </div>
    </div>
    <!-- 头部 结束 -->
    <!-- 轮播图 开始 -->
    <div class="swipe">
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(image, index) in images" :key="index">
          <img :src="image" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 轮播图 结束 -->
    <!-- 详情 开始 -->
    <div class="main">
      <!-- 名称 -->
      <div class="title">
        <p>{{ products.store_name }}</p>
        <div><van-rate v-model="valuestart" /></div>
        <span>{{ products.street }}</span>
      </div>
      <!-- 地址 -->
      <div class="address">
        <div>
          <router-link :to="`/mymap?sid=${products.sid}`">
            <p>{{ products.address }}</p>
            <p>{{ products.business_hours }}</p>
          </router-link>
        </div>
        <div @click="call"><img src="../assets/phone.png" /></div>
      </div>
      <!-- 商品 -->
      <div class="produce">
        <p>
          <span>游泳卡</span>
          <span>随时退 过期退</span>
        </p>
        <!-- 种类1 -->
        <div class="type">
          <div class="type_left">
            <p>{{ products.ordinary }}</p>
            <p>不限人群 | 180分钟/次 | 免预约</p>
            <p>
              <span>{{ products.single }}</span>
              <s>{{ products.old_single }}</s>
            </p>
          </div>
          <div class="type_buy">
            <button @click="isshow1">购买</button>
          </div>
        </div>
        <!-- 种类2 -->
        <div class="type">
          <div class="type_left">
            <p>{{ products.coach }}</p>
            <p>不限人群 | 60分钟/次 | 须预约</p>
            <p>
              <span>{{ products.experience }}</span>
              <s>{{ products.old_experience }}</s>
            </p>
          </div>
          <div class="type_order">
            <button @click="isshow2">预约</button>
          </div>
        </div>
        <!-- 弹出选项 -->
        <van-action-sheet v-model="show1" title="请选择购买数量">
          <div class="content">
            <div class="field">
              <div class="tip">选择课程：</div>
              <div class="count_title">{{ products.ordinary }}</div>
            </div>
            <div class="field2">
              <span class="tip">购买数量：</span>
              <span class="button">
                <button @click="reduce">-</button>
                <input type="text" v-model="value1" />
                <button @click="add">+</button>
              </span>
            </div>
            <button class="buy" @click="buy">立即购买</button>
          </div>
        </van-action-sheet>
        <!-- 弹出选项 -->
        <van-action-sheet v-model="show2" title="请选择购买数量">
          <div class="content">
            <div class="field">
              <div class="tip">选择课程：</div>
              <div class="count_title2">{{ products.coach }}</div>
            </div>
            <div class="field2">
              <span class="tip">购买数量：</span>
              <span class="button">
                <button @click="reduce2">-</button>
                <input type="text" v-model="value2" />
                <button @click="add2">+</button>
              </span>
            </div>
            <button class="buy" @click="appointment">立即预约</button>
          </div>
        </van-action-sheet>
      </div>
    </div>
    <!-- 详情 结束 -->
  </div>
</template>

<script>
import { Toast } from 'vant';
export default {
  props: ["sid"],
  data() {
    return {
      uid: sessionStorage.getItem("uid"),
      // 弹出框
      show1: false,
      show2: false,
      value1: 1,
      value2: 1,
      // 评价
      valuestart: 5,
      // 轮播
      images: [
        require("../assets/lun/d1.jpg"),
        require("../assets/lun/d2.jpg"),
        require("../assets/lun/d3.jpg"),
        require("../assets/lun/d4.jpg"),
      ],
      // 分享
      showShare: false,
      options: [
        { name: "微信", icon: "wechat" },
        { name: "微博", icon: "weibo" },
        { name: "复制链接", icon: "link" },
        { name: "分享海报", icon: "poster" },
        { name: "二维码", icon: "qrcode" },
      ],
      products: [],
      status: "2",
      mydate: "",
    };
  },
  methods: {
    // 购买
    buy() {
      this.mydate = new Date();
      this.axios
        .post("/swim_order/add",`order_pic=${this.products.src}&userid=${this.uid}&storeid=${this.products.sid}&order_number=${this.value1}
          &status=${this.status}&order_time=${this.mydate.toLocaleString()}&order_type=${this.products.ordinary}
          &order_price=${this.products.single * this.value1}&order_store=${this.products.store_name}`)
        .then((result) => {
          if (result.data.msg == "ok") {
            Toast.success('购买成功');
            this.show1=false;
          }else{
            Toast.fail('您还未登录，请先登录！');
          }
        });
    },
    // 预约
    appointment() {
      this.mydate = new Date();
      this.axios
        .post(
          "/swim_order/add",
          `userid=${this.uid}&storeid=${this.products.sid}&order_number=${
            this.value2
          }&status=${
            this.status
          }&order_time=${this.mydate.toLocaleString()}&order_pic=${
            this.products.src
          }&order_type=${this.products.coach}&order_price=${
            this.products.experience * this.value2
          }&order_store=${this.products.store_name}`
        )
        .then((result) => {
          if (result.data.msg == "ok") {
            Toast.success('预约成功');
            this.show2=false;
          }else{
            Toast.fail('购买失败');
          }
        });
    },
    // 增减数量
    reduce() {
      if (this.value1 > 1) {
        this.value1--;
      }
    },
    add() {
      if (this.value1 < 99) {
        this.value1++;
      }
    },
    reduce2() {
      if (this.value2 > 1) {
        this.value2--;
      }
    },
    add2() {
      if (this.value2 < 99) {
        this.value2++;
      }
    },
    // 弹出购买
    isshow1() {
      this.show1 = true;
    },
    // 弹出预约
    isshow2() {
      this.show2 = true;
    },
    // 打电话
    call() {
      window.location.href = "tel://0351-5611858";
    },
    // 分享
    onSelect(option) {
      Toast(option.name);
      this.showShare = false;
    },
  },
  mounted() {
    let sid = this.$route.query.sid;
    this.axios.get("/store?id=sid").then((result) => {
      this.products = result.data.data[parseInt(sid - 1)];
    });
  },
  watch: {
    //监视地址栏的商品编号
    sid() {
      this.axios.get("/store?id=sid");
    },
  },
};
</script>
<style>
.pdetails {
  padding-top: 70px;
}
/* 头部 */
.pdetails .top {
  width: 100%;
  height: 60px;
  position: fixed;
  font-size: 18px;
  font-weight: 600;
  top: 0;
  text-align: center;
  background-color: #fdfdfd;
  border-bottom: 1px solid #eee;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pdetails .top > span {
  width: 200px;
  text-align: left;
}
.pdetails .share {
  width: 60px;
  height: 60px;
  position: relative;
}
.pdetails .share > img {
  width: 30px;
  display: block;
  position: absolute;
  right: 20%;
  top: 30%;
  z-index: -10;
}
.pdetails .van-cell {
  content: "";
  width: 60px;
  height: 60px;
  background: transparent;
}
/* 轮播图 */
.pdetails .swipe {
  width: 90%;
  margin: 0 auto;
  border-radius: 10px;
}
.pdetails .swipe img {
  width: 100%;
  border-radius: 10px;
}
/* 详情开始 */
.pdetails .main {
  width: 90%;
  margin: 0 auto;
  margin-top: 10px;
}
.pdetails .title {
  text-align: left;
  padding: 20px 0;
  line-height: 24px;
  border-bottom: 1px solid #ddd;
}
.pdetails .title > p {
  font-size: 18px;
  margin-bottom: 10px;
}
/* 地址 */
.pdetails .address {
  height: 50px;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 5px solid #ddd;
  line-height: 22px;
}
.pdetails .address > div > a {
  color: #333;
}
.pdetails .address > :last-child {
  width: 30px;
}
.pdetails .address > :last-child > img {
  width: 80%;
}
/* 商品 */
.pdetails .produce {
  padding: 10px 0;
}
.pdetails .produce > p {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.pdetails .produce > p > :first-child {
  font-size: 16px;
  color: #333;
}
.pdetails .produce > p > :last-child {
  font-size: 12px;
  color: #999;
}
/* 价格 */
.pdetails .type {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
}
.pdetails .type_left {
  width: 70%;
  text-align: left;
  line-height: 22px;
}
.pdetails .type_left > :first-child {
  font-size: 16px;
}
.pdetails .type_left > :nth-child(2) {
  font-size: 12px;
  color: #999;
}
.pdetails .type_left > p > span {
  color: #dc3545;
  font-size: 16px;
}
.pdetails .type_left > p > span::before {
  content: "￥";
}
.pdetails .type_left > p > s {
  color: #999;
  margin-left: 10px;
}
.pdetails .type_left > p > s::before {
  content: "￥";
}
.pdetails .type_buy > button {
  width: 60px;
  height: 28px;
  border: 0;
  background-color: #007bff;
  color: #fff;
  border-radius: 28px;
}
.pdetails .type_order > button {
  width: 60px;
  height: 28px;
  border: 0;
  background-color: #dc3545;
  color: #fff;
  border-radius: 28px;
}
/* 弹出选项 */
.pdetails .content {
  text-align: left;
  position: relative;
}

.pdetails .tip {
  height: 30px;
  line-height: 30px;
  font-size: 14px;
}

.pdetails .count_title {
  width: 150px;
  height: 20px;
  line-height: 20px;
  padding: 10px;
  border-radius: 20px;
  border: 1px solid #007bff;
  background-color: #bce0ff;
  color: #007bff;
  font-weight: 600;
  font-size: 14px;
  margin-top: 10px;
  text-align: center;
}
.pdetails .count_title2 {
  width: 150px;
  height: 20px;
  line-height: 20px;
  padding: 10px;
  border-radius: 20px;
  border: 1px solid #dc3545;
  background-color: #fec6cc;
  color: #dc3545;
  font-weight: 600;
  font-size: 14px;
  margin-top: 10px;
  text-align: center;
}
.pdetails .field {
  height: 90px;
  padding: 20px;
  border-top: 1px solid #ddd;
}

.pdetails .button > button {
  width: 30px;
  height: 30px;
  font-size: 26px;
  padding: 0;
  margin: 0;
  border-radius: 50%;
  background-color: #ccc;
  color: #fff;
  border: 0;
  outline: none;
  line-height: 30px;
}
.pdetails .button > button:active {
  background-color: #eee;
}
.pdetails .button > input {
  width: 30px;
  height: 30px;
  border: 0;
  margin: 0 10px;
  font-size: 20px;
  text-align: center;
}

.pdetails .field2 {
  height: 80px;
  padding: 20px;
  border-top: 1px solid #ddd;
  display: flex;
  justify-content: space-between;
}
.pdetails .buy {
  width: 100%;
  height: 45px;
  background-color: #dc3545;
  display: block;
  position: absolute;
  bottom: 0;
  color: #fff;
  font-size: 20px;
  border: 0;
}
.pdetails .buy:active {
  background-color: #fc3515;
}
</style>